<template>
  <view>
    <view class="flex-col justify-start page">
  <view class="flex-col group">
    <view class="flex-col">
      <view class="flex-col self-stretch section">
        <view class="flex-col justify-start items-end relative section_2">
          <image
            class="image_4"
            src="/static/images/about/1.png"
          />
          <view class="text-wrapper pos"></view>
        </view>
        <view class="flex-col relative group_2">
          <view class="flex-col justify-start items-center self-center image-wrapper">
            <image
              class="image_5"
              src="/static/images/about/2.png"
            />
          </view>
          <text class="self-center font text_2">我是MT的大哥</text>
          <view class="flex-row justify-center items-center self-stretch group_3">
            <text class="text_3">ID：123456123</text>
            <image
              class="image_6"
              src="/static/images/about/3.png"
            />
          </view>
        </view>
      </view>
      <image
        class="self-start image_9 image_10 mt-55"
        src="/static/images/about/4.png"
      />
    </view>
    <view class="flex-col justify-start relative group_4">
      <view class="flex-col group_5">
        <view class="flex-row items-center equal-division">
          <view class="flex-col justify-start equal-division-item section_4">
            <view class="flex-row justify-center items-center section_5">
              <image
                class="image_7"
                src="/static/images/about/5.png"
              />
              <view class="flex-row items-center ml-16">
                <text class="font_2 text_4">使用说明</text>
                <image
                  class="shrink-0 image_8 ml-2"
                  src="/static/images/about/6.png"
                />
              </view>
            </view>
          </view>
          <view class="flex-col justify-start equal-division-item section_3 ml-8">
            <view class="flex-row justify-end items-center section_6">
              <text class="font_2">在线客服</text>
              <image
                class="image_8 ml-2"
                src="/static/images/about/7.png"
              />
            </view>
          </view>
        </view>
        <view class="flex-row justify-between items-center self-stretch group_6">
          <text class="font text_5">推荐给朋友</text>
          <image
            class="image_8"
            src="/static/images/about/8.png"
          />
        </view>
        <image
          class="self-start image_9 image_12"
          src="/static/images/about/9.png"
        />
        <image
          class="self-start image_9 image_13"
          src="/static/images/about/10.png"
        />
      </view>
      <view class="flex-col pos_2">
        <image
          class="self-stretch image_11"
          src="/static/images/about/11.png"
        />
        <view class="flex-row justify-between items-center self-stretch group_7">
          <text class="font text_6">博主/加盟商合作</text>
          <image
            class="image_8"
            src="/static/images/about/12.png"
          />
        </view>
        <image
          class="self-start image_9 image_14"
          src="/static/images/about/13.png"
        />
      </view>
      <image
        class="image_11 pos_3"
        src=""
      />
      <view class="flex-row justify-between items-center group_8 pos_4">
        <text class="font text_7">关于我们</text>
        <image
          class="image_8"
          src="/static/images/about/14.png"
        />
      </view>
      <image
        class="image_11 pos_5"
        src="/static/images/about/15.png"
      />
      <view class="flex-row justify-between items-center group_9 pos_6">
        <text class="font text_8">意见反馈</text>
        <image
          class="image_8"
          src="/static/images/about/14.png"
        />
      </view>
    </view>
  </view>
</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.mt-55 {
  margin-top: 55px;
}
.page {
  padding-bottom: 248.5px;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  height: 563.5px;
}
.section {
  padding-bottom: 57px;
  background-image: linear-gradient(180deg, #fff8c7 0%, #fff9c800 97.7%);
  height: 320px;
}
.section_2 {
  padding: 55px 0 126px;
  background-image: url('/static/images/about/16.png');

  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_4 {
  margin-right: 21px;
  width: 16px;
  height: 16px;
}
.text-wrapper {
  border-radius: 24px;
  width: 54px;
  height: 21px;
}
.pos {
  position: absolute;
  left: 21px;
  top: 12px;
}
.group_2 {
  margin-top: -81px;
}
.image-wrapper {
  padding: 2px 0 1px;
  background-image: url('/static/images/about/17.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 96px;
}
.image_5 {
  width: 94px;
  height: 94px;
}
.font {
  font-size: 12px;
  font-family: Source Han Sans SC;
  line-height: 11.5px;
  color: #333333;
}
.text_2 {
  margin-top: 8px;
  color: #ffe944;
  font-weight: 700;
  text-shadow: 0 1px #333333, 0 -1px #333333, 1px 0 #333333, -1px 0 #333333, 1px 1px 0px #333333;
}
.group_3 {
  margin-top: 17px;
}
.text_3 {
  color: #666666;
  font-size: 16px;
  font-family: DIN;
  font-weight: 700;
  line-height: 11.5px;
}
.image_6 {
  width: 14px;
  height: 14px;
}
.image_9 {
  width: 24px;
  height: 24px;
}
.image_10 {
  margin-left: 17px;
}
.group_4 {
  margin-top: -113px;
  padding-bottom: 55px;
}
.group_5 {
  margin-left: 15px;
  margin-right: 13.5px;
}
.equal-division {
  align-self: stretch;
}
.equal-division-item {
  flex: 1 1 168px;
}
.section_4 {
  padding-top: 2.5px;
  background-image: url('/static/images/about/18.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 67px;
}
.section_5 {
  margin-left: 1px;
  padding: 11.5px 0 12.5px;
  background-image: url('/static/images/about/19.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_7 {
  width: 36px;
  height: 40px;
}
.font_2 {
  font-size: 14px;
  font-family: Source Han Sans SC;
  line-height: 13px;
  color: #333333;
}
.text_4 {
  line-height: 13px;
}
.image_8 {
  width: 3px;
  height: 6px;
}
.section_3 {
  padding: 4.5px 0 7.5px;
  background-image: url('/static/images/about/20.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 76px;
}
.section_6 {
  margin-left: 2.5px;
  margin-right: 2.5px;
  padding: 26px 23px 25px;
  background-image: url('/static/images/about/21.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.group_6 {
  margin-top: 18.5px;
  padding-left: 37.5px;
  padding-right: 10.5px;
}
.text_5 {
  line-height: 11px;
}
.image_12 {
  margin-left: 2px;
  margin-top: 38px;
}
.image_13 {
  margin-left: 2px;
  margin-top: 31px;
}
.pos_2 {
  position: absolute;
  left: 15.5px;
  right: 15.5px;
  top: 126px;
}
.image_11 {
  opacity: 0.38;
  width: 91.7333vw;
  height: 1.0667vw;
}
.group_7 {
  margin-top: 20.5px;
  padding-left: 37px;
  padding-right: 8.5px;
}
.text_6 {
  line-height: 12.5px;
}
.image_14 {
  margin-left: 1.5px;
  margin-top: 91px;
}
.pos_3 {
  position: absolute;
  left: 15.5px;
  right: 15.5px;
  bottom: 92.5px;
}
.group_8 {
  width: 298.5px;
}
.pos_4 {
  position: absolute;
  right: 24px;
  top: 205.5px;
}
.text_7 {
  line-height: 11px;
}
.pos_5 {
  position: absolute;
  left: 15.5px;
  right: 15.5px;
  bottom: 37.5px;
}
.group_9 {
  width: 298.5px;
}
.pos_6 {
  position: absolute;
  right: 24px;
  top: 260.5px;
}
.text_8 {
  line-height: 11px;
}
</style>
    
      